<template>
<div class="left-menu-cent">
  <el-scrollbar wrap-class="scrollbar-wrapper">
    <el-menu
      :show-timeout="200"
      :default-active="$route.path"
      :collapse="isCollapse"
      :background-color="variables.menuBg"
      :text-color="variables.menuText"
      :active-text-color="variables.menuActiveText"
      mode="vertical"
    >
      <sidebar-item
        v-for="route in permission_routers"
        :key="route.path"
        :item="route"
        :base-path="route.path"
      />
    </el-menu>
  </el-scrollbar>
</div>
</template>

<script>
import variables from "@/styles/variables.scss";
import SidebarItem from "./SidebarItem";
import { mapGetters } from "vuex";

export default {
  components: { SidebarItem },
  data() {
    return {
      permission_routers: [],
      isFirst: 1
    };
  },
  created() {
    this.getMenuItem(this.$store.state.app.moduleKey, true);
  },
  computed: {
    ...mapGetters(["sidebar", "realname"]),
    variables() {
      return variables;
    },
    moduleKey() {
      return this.$store.state.app.moduleKey;
    },
    isCollapse() {
      return !this.sidebar.opened;
    }
  },
  methods: {
    getMenuItem(val, isFirst) {
      if (isFirst) {
        if (window.localStorage.getItem("menuKey") == null) {
          this.$store.dispatch("moduleKey", 'yzt');
          window.localStorage.setItem("menuKey", 'yzt');
          val='yzt'
        } else {
          val = window.localStorage.getItem("menuKey");
        }
      } else {
        window.localStorage.setItem("menuKey", val);
      }
      this.$store.dispatch("delAllViews", ""); //清空二级title
      let routers = this.$store.getters.permission_routers;
      let routerList = []; //临时存放
      for (let index in routers) {
        if (routers[index].meta && routers[index].meta.key === val) {
          routerList.push(routers[index]);
        }
      }

      this.permission_routers = routerList;
      
      // if (this.permission_routers.length == 0) {
      //   this.$message.info("没有配置模块页面");
      //   this.$router.push({ path: "/none/index" });
      // }
      // if (!isFirst) {
      //   //跳转到第一个子级下
      //   if (this.permission_routers[0].children.length > 0) {
      //     let goPath = path.resolve(
      //       this.permission_routers[0].path,
      //       this.permission_routers[0].children[0].path
      //     );
      //     this.$router.push({ path: goPath });
      //   } else {
      //     this.$router.push({ path: this.permission_routers[0].path });
      //   }
      // }
    }
  },
  watch: {
    moduleKey(val) {
      if (val) {
        this.getMenuItem(val);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.header-describ{
    float: left;
    height: 20px !important;
    width: 120px;
    font-size: 3px;
}
.hamburger-container{
    float: right;
}
.el-header{
    height: 20px !important;
    border: 1px;
    background: #f4f4f5;
}
.el-main{
    padding: 0px!important;
}
.el-scrollbar{
    height: 100%;
}
/deep/ .el-menu-item .el-tooltip {
  padding: 0 2px 0 5px!important;
}
//  div#app .el-menu-item, div#app .el-submenu__title{
//         background-color:  #f4f6f8 !important;
//         color: #4e5157 !important;
//         border-left: 3px solid transparent;
//     }
</style>
<style lang="scss">
    .left-menu-cent{
      background: #f4f6f8;
    }
    div#app .sidebar-container ul.el-menu
    {
        background: #f4f6f8 !important;
        color: #4e5157 !important;
        font-size: 12px;
        font-weight: 600;
    }

    div#app .sidebar-container .el-menu-item.is-active
    {
        color: #0098ff!important;
        background-color: rgba(0,152,255, 0.08) !important;
        border-left: 3px solid #0098ff;
    }
    div#app .sidebar-container .el-menu-item.is-active span
    {
        color: #0098ff;
    }
    div#app .sidebar-container .el-menu-item:hover
    {
        background-color: rgba(0,152,255, 0.08) !important;
    }
    div#app .sidebar-container .submenu-title-noDropdown.is-active:hover, div#app .sidebar-container .el-submenu__title.is-active:hover
    {
        color: #0098ff;
        background-color: #29a7e1 !important;
    }

    div#app .sidebar-container .submenu-title-noDropdown:hover, div#app .sidebar-container .el-submenu__title:hover
    {
        background-color: #000 !important;
    }

    div#app .el-menu-item, div#app .el-submenu__title{
        background: #f4f6f8 !important;
        color: #4e5157 !important;
        border-left: 3px solid transparent;
    }
    div#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title, div#app .sidebar-container .el-submenu .el-menu-item
    {
        color: #4e5157 !important;
        background: #f4f6f8 !important;
    }
    div#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover, div#app .sidebar-container .el-submenu .el-menu-item:hover
    {
        background-color: #f4f6f8 !important;
    }

    div#app .sidebar-container .el-submenu .el-menu-item.is-active
    {
        background-color: #29a7e1 !important;
    }
    div#app .sidebar-container .el-submenu .el-menu-item.is-active:hover
    {
        background-color: #29a7e1 !important;
    }
    .sidebar-container .el-submenu .el-menu-item span,.sidebar-container .el-submenu__title span,.sidebar-container .el-menu-item span
    {
        font-size: 14px;
    }
    .sidebar-container .svg-icon
    {
        width: 1.5em !important;
        height: 1.5em !important;
        vertical-align: -0.45em !important;
    }
    div#app .sidebar-container a
    {
        display: block;
    }
    .sidebar-container .el-menu-item,.sidebar-container .el-submenu__title
    {
        height: 42px;
        line-height: 42px;
    }
</style>